<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
<head>
 
    <!-- 引入 ECharts 文件 -->
	<script src="lib/jquery/jquery.min-v2.1.4.js" th:src="@{/lib/jquery/jquery.min-v2.1.4.js}"></script>
	<script src="lib/echarts_3.7.1/echarts.js" th:src="@{/lib/echarts_3.7.1/echarts.js}"></script>
    <script src="lib/common.js" th:src="@{/lib/common.js}"></script>
	
    <title>温度</title>
</head>
<body  style="background-color:#054E6D;"> 


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 560px;height:130px;"></div>
	
	<script type="text/javascript" th:inline="javascript">
	
	var myChart = echarts.init(document.getElementById('main'));
	// 基于准备好的dom，初始化echarts实例
// Generate data
			$(document).ready(function(){
		try{	
		
			// 使用刚指定的配置项和数据显示图表。
			getData();			
		}
		catch(ex){
			//
			return;
		}
	});	
		var t
		function getData()
		{
							
                   sendAjaxRequest(/*[[@{/test/getTemperatureData?type=dynamic}]]*/,null,null,function success(data){

                	   jsonCallBack(data);
                   })
							
				//t=setTimeout("getData()",10000);
		}
		
		function jsonCallBack(data) {
			var resultobj=data.data;
			resultobj = eval('('+resultobj+')');
			var option = {
				title : [ {
					left : 'center',
					text : '温度',
					textStyle : {
						fontStyle : 'normal',
						fontFamily : '微软雅黑',
						fontSize : 11,
						color : '#fff',
					},
				} ],
				backgroundColor : '#054E6D',
				tooltip : { //提示框组件
					trigger : 'axis',
					formatter : '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
					axisPointer : {
						type : 'shadow',
						label : {
							backgroundColor : '#054E6D'
						}
					},
					textStyle : {
						color : '#fff',
						fontStyle : 'normal',
						fontFamily : '微软雅黑',
						fontSize : 11,
					}
				},
				grid : {
					left : '1%',
					right : '4%',
					bottom : '6%',
					top : 30,
					padding : '0 0 10 0',
					containLabel : true,
				},
				legend : {//图例组件，颜色和名字
					right : 10,
					top : 0,
					itemGap : 16,
					itemWidth : 18,
					itemHeight : 10,
					data : [ {
						name : '站台',
					//icon:'image://../wwwroot/js/url2.png', //路径
					}, {
						name : '站厅',
					} ],
					textStyle : {
						color : '#a8aab0',
						fontStyle : 'normal',
						fontFamily : '微软雅黑',
						fontSize : 11,
					}
				},
				xAxis : [ {
					type : 'category',
					boundaryGap : true,//坐标轴两边留白
					data : [ '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',
							'12:00', '13:00', '14:00', '15:00', '16:00',
							'17:00', '18:00', '19:00', '20:00', '21:00',
							'22:00', '23:00' ],
					axisLabel : { //坐标轴刻度标签的相关设置。
						interval : 1,//设置为 1，表示『隔一个标签显示一个标签』
						margin : 15,
						textStyle : {
							color : '#078ceb',
							fontStyle : 'normal',
							fontFamily : '微软雅黑',
							fontSize : 11,
						}
					},
					axisTick : {//坐标轴刻度相关设置。
						show : false,
					},
					axisLine : {//坐标轴轴线相关设置
						lineStyle : {
							color : '#fff',
							opacity : 0.2
						}
					},
					splitLine : { //坐标轴在 grid 区域中的分隔线。
						show : false,
					}
				} ],
				yAxis : [ {

					type : 'value',
					splitNumber : 5,
					axisLabel : {
						textStyle : {
							color : '#a8aab0',
							fontStyle : 'normal',
							fontFamily : '微软雅黑',
							fontSize : 11,
						}
					},
					axisLine : {
						show : false
					},
					axisTick : {
						show : false
					},
					splitLine : {
						show : true,
						lineStyle : {
							color : [ '#fff' ],
							opacity : 0.06
						}
					}

				} ],
				series : [
						{
							name : '站台',
							type : 'line',
							data : resultobj.data.platformTemperature,
							barWidth : 8,
							barGap : 0,//柱间距离
							label : {//图形上的文本标签
								normal : {
									show : true,
									position : 'top',
									textStyle : {
										color : '#a8aab0',
										fontStyle : 'normal',
										fontFamily : '微软雅黑',
										fontSize : 11,
									},
								},
							},
							itemStyle : {//图形样式
								normal : {
									barBorderRadius : [ 5, 5, 0, 0 ],
									color : new echarts.graphic.LinearGradient(
											0,
											0,
											0,
											1,
											[
													{
														offset : 1,
														color : 'rgba(127, 128, 225, 0.7)'
													},
													{
														offset : 0.9,
														color : 'rgba(72, 73, 181, 0.7)'
													},
													{
														offset : 0.31,
														color : 'rgba(0, 208, 208, 0.7)'
													},
													{
														offset : 0.15,
														color : 'rgba(0, 208, 208, 0.7)'
													},
													{
														offset : 0,
														color : 'rgba(104, 253, 255, 0.7)'
													} ], false),
								},
							},
						},
						{
							name : '站厅',
							type : 'line',
							data : resultobj.data.hallTemperature,
							barWidth : 8,
							barGap : 0.1,//柱间距离
							label : {//图形上的文本标签
								normal : {
									show : true,
									position : 'top',
									textStyle : {
										color : '#a8aab0',
										fontStyle : 'normal',
										fontFamily : '微软雅黑',
										fontSize : 11,
									},
								},
							},
							itemStyle : {//图形样式
								normal : {
									barBorderRadius : [ 5, 5, 0, 0 ],
									color : new echarts.graphic.LinearGradient(
											0,
											0,
											0,
											1,
											[
													{
														offset : 1,
														color : 'rgba(127, 128, 225, 0.7)'
													},
													{
														offset : 0.9,
														color : 'rgba(72, 73, 181, 0.7)'
													},
													{
														offset : 0.25,
														color : 'rgba(226, 99, 74, 0.7)'
													},
													{
														offset : 0,
														color : 'rgba(253, 200, 106, 0.7)'
													} ], false),
								},
							},
						}

				]
			};
			// 使用刚指定的配置项和数据显示图表。

			myChart.setOption(option);
		}
	</script>
	
</body>
</html>